<template>
  <div class="home">
    <div class="ui_left_mask" :class="hiddenUI ? 'hiddenLeft' : ''">
      <div class="ui_left">
        <div class="nape_content" style="margin-top: 0;">
          <div class="content_title">
            <span>内销态势</span>
          </div>
          <div class="center_content">
            <div class="charts_box pseudoClass"
              :style="`--title:'${leftTopPieChartValue.title}';--value:'${leftTopPieChartValue.value}'`">
              <charts-chen container="leftTopPieChart" width="100%" height="100%" :options="leftTopPieChart" />
            </div>
            <div class="list_box">
              <div class="listTotle">
                <span>预计目标： 693</span>
              </div>
              <div class="pie_list" v-for="(item, index) in leftTopPieChart.dataset.source" :key="index"
                @mouseover="pieChartMouseover($event, '内销态势')" :class="index !== 0 || 'active'">
                <div class="name">
                  <div class="circle" :style="'background:' + item[3]"></div>
                  <span>{{ item[0] }}</span>
                </div>
                <div class="rate" :style="'color:' + item[3]">
                  <count-to :start-val="0" :end-val="Number(item[1] || 0)" :duration="3000" :decimals="0" />
                  %
                </div>
                <div class="num">
                  <count-to :start-val="0" :end-val="Number(item[2] || 0)" :duration="3000" :decimals="0" />
                  家
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="nape_content">
          <div class="content_title">
            <span>外销态势</span>
          </div>
          <div class="center_content">
            <div class="charts_box pseudoClass"
              :style="`--title:'${leftTwoPieChartValue.title}';--value:'${leftTwoPieChartValue.value}'`">
              <charts-chen container="leftTwoPieChart" width="100%" height="100%" :options="leftTwoPieChart" />
            </div>
            <div class="list_box">
              <div class="listTotle">
                <span>预计目标： 693</span>
              </div>
              <div class="pie_list" v-for="(item, index) in leftTwoPieChart.dataset.source" :key="index"
                @mouseover="pieChartMouseover($event, '外销态势')" :class="index !== 0 || 'active'">
                <div class="name">
                  <div class="circle" :style="'background:' + item[3]"></div>
                  <span>{{ item[0] }}</span>
                </div>
                <div class="rate" :style="'color:' + item[3]">
                  <count-to :start-val="0" :end-val="Number(item[1] || 0)" :duration="3000" :decimals="0" />
                  %
                </div>
                <div class="num">
                  <count-to :start-val="0" :end-val="Number(item[2] || 0)" :duration="3000" :decimals="0" />
                  家
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="nape_content">
          <div class="content_title">
            <span>内销订单状况</span>
          </div>
          <div class="center_content">
            <div class="charts_box pseudoClass">
              <charts-chen container="leftThreePieChart" width="100%" height="100%" :options="leftThreePieChart" />
            </div>
            <div class="list_box">
              <div class="listTotle">
                <span>在手订单数 365</span>
              </div>
              <div class="pie_list" v-for="(item, index) in leftThreePieChart.series[0].data" :key="index">
                <div class="name">
                  <div class="circle" :style="'background:' + item.color"></div>
                  <span>{{ item.name }}</span>
                </div>
                <div class="num" :style="'color:' + item.color">
                  <count-to :start-val="0" :end-val="Number(item.value || 0)" :duration="3000" :decimals="0" />
                  个
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="nape_content">
          <div class="content_title">
            <span>外销订单状况</span>
          </div>
          <div class="center_content">
            <div class="charts_box pseudoClass">
              <charts-chen container="leftFourPieChart" width="100%" height="100%" :options="leftFourPieChart" />
            </div>
            <div class="list_box">
              <div class="listTotle">
                <span>在手订单数 1629</span>
              </div>
              <div class="pie_list" v-for="(item, index) in leftFourPieChart.series[0].data" :key="index">
                <div class="name">
                  <div class="circle" :style="'background:' + item.color"></div>
                  <span>{{ item.name }}</span>
                </div>
                <div class="num">
                  <count-to :start-val="0" :end-val="Number(item.value || 0)" :duration="3000" :decimals="0" />
                  个
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="nape_content">
          <div class="content_title">
            <span>设备故障时长统计</span>
          </div>
          <div class="center_content">
            <div class="table_box">
              <div class="tableHead">
                <span style="width: 12%">序号</span>
                <span>设备名称</span>
                <span>停机时长</span>
                <span>停机次数</span>
              </div>
              <div class="tableContent" v-if="leftBottomTable.list.length != 0">
                <div class="tableItem" v-for="(item, index) in leftBottomTable.list"
                  :style="{ animationDelay: index * 0.05 + 's' }" :key="index"
                  @click="webToUeMessige('设备故障时长统计', item.name)">
                  <div class="textContent" style="width: 12%">
                    <span>{{ index + 1 }}</span>
                  </div>
                  <div class="textContent">
                    <span class="scrollText">{{ item.name }}</span>
                  </div>
                  <div class="textContent">
                    <span>{{ item.num }}</span>
                  </div>
                  <div class="textContent">
                    <span>{{ item.time }}</span>
                  </div>
                </div>
              </div>
              <div class="tableContent" v-else-if="!leftBottomTable.loading">
                <div class="noData"></div>
              </div>
              <div class="tableContent" v-if="leftBottomTable.loading">
                <a-spin />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="ui_right_mask" :class="hiddenUI ? 'hiddenRight' : ''">
      <div class="ui_right">
        <div class="nape_content" style="margin-top: 0;">
          <div class="content_title">
            <span>原材料仓储态势</span>
          </div>
          <div class="center_content">
            <div class="table_box">
              <div class="tableHead">
                <span style="width: 12%">序号</span>
                <span>材料名称</span>
                <span>库存量</span>
                <span>库存状态</span>
              </div>
              <div class="tableContent" v-if="rightTopTable.list.length != 0">
                <div class="tableItem" v-for="(item, index) in rightTopTable.list"
                  :style="{ animationDelay: index * 0.05 + 's' }" :key="index"
                  @click="webToUeMessige('原材料仓储态势', item.name)">
                  <div class="textContent" style="width: 12%">
                    <span>{{ index + 1 }}</span>
                  </div>
                  <div class="textContent">
                    <span class="scrollText">{{ item.name }}</span>
                  </div>
                  <div class="textContent">
                    <span>{{ item.num }}</span>
                  </div>
                  <div class="textContent">
                    <span :style="item.num < 3000 ? 'color: #e66151' : 'color:#00d68a;'">
                      {{ item.num < 3000 ? '存量过低' : '充足' }} </span>
                  </div>
                </div>
              </div>
              <div class="tableContent" v-else-if="!rightTopTable.loading">
                <div class="noData"></div>
              </div>
              <div class="tableContent" v-if="rightTopTable.loading">
                <a-spin />
              </div>
            </div>
          </div>
        </div>
        <div class="nape_content">
          <div class="content_title">
            <span>半成品仓储态势</span>
          </div>
          <div class="center_content">
            <div class="table_box">
              <div class="tableHead">
                <span style="width: 12%">序号</span>
                <span>材料名称</span>
                <span>库存量</span>
                <span>库存状态</span>
              </div>
              <div class="tableContent" v-if="rightCenterTable.list.length != 0">
                <div class="tableItem" v-for="(item, index) in rightCenterTable.list"
                  :style="{ animationDelay: index * 0.05 + 's' }" :key="index"
                  @click="webToUeMessige('半成品仓储态势', item.name)">
                  <div class="textContent" style="width: 12%">
                    <span>{{ index + 1 }}</span>
                  </div>
                  <div class="textContent">
                    <span class="scrollText">{{ item.name }}</span>
                  </div>
                  <div class="textContent">
                    <span>{{ item.num }}</span>
                  </div>
                  <div class="textContent">
                    <span :style="item.num < 3000 ? 'color: #e66151' : 'color:#00d68a;'">
                      {{ item.num < 3000 ? '存量过低' : '充足' }} </span>
                  </div>
                </div>
              </div>
              <div class="tableContent" v-else-if="!rightCenterTable.loading">
                <div class="noData"></div>
              </div>
              <div class="tableContent" v-if="rightCenterTable.loading">
                <a-spin />
              </div>
            </div>
          </div>
        </div>
        <div class="nape_content">
          <div class="content_title">
            <span>采购态势</span>
          </div>
          <div class="center_content">
            <charts-chen container="rightTopLineChart" width="100%" height="100%" :options="rightTopLineChart" />
          </div>
        </div>
        <div class="nape_content">
          <div class="content_title">
            <span>售卖城市</span>
          </div>
          <div class="center_content">
            <charts-chen container="rightTwoChart" width="100%" height="100%" :options="rightTwoChart" />
          </div>
        </div>
        <div class="nape_content">
          <div class="content_title">
            <span>设备运维</span>
          </div>
          <div class="center_content">
            <div class="tpye_box">
              <div class="box_content">
                <div>正在运行</div>
                <div class="bottom">
                  <count-to :start-val="0" class="count_num" :end-val="60" :duration="3000" :decimals="0" />
                  <div>台</div>
                </div>
              </div>
              <div class="box_content">
                <div>停止运行</div>
                <div class="bottom">
                  <count-to :start-val="0" class="count_num" :end-val="6" :duration="3000" :decimals="0" />
                  <div>台</div>
                </div>
              </div>
              <div class="box_content">
                <div>运行故障</div>
                <div class="bottom">
                  <count-to :start-val="0" class="count_num" :end-val="12" :duration="3000" :decimals="0" />
                  <div>台</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, onUnmounted, nextTick, watch } from 'vue';
import * as echarts from 'echarts';
import { randomColor, delay, webToUeMessige } from '../../utils';

export default defineComponent({
  props: {
    showUI: {
      type: Boolean
    }
  },
  components: {},
  setup (props) {
    const data = reactive({
      hiddenUI: false,
      leftTopPieChart: {
        tooltip: {
          confine: true,
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#55c0ff'
            }
          },
          backgroundColor: 'rgba(24, 157, 247, 0.6)',
          textStyle: {
            color: 'white'
          }
        },
        legend: {
          show: false
        },
        color: ['#00e5a8', '#8a65e0'],
        grid: {
          left: 10,
          bottom: 10,
          top: 10,
          right: 10
        },
        title: {
          show: false
        },
        dataset: {
          source: [
            ['已达成目标', 58, 403, '#00e5a8'],
            ['未达成目标', 42, 290, '#8a65e0']
          ]
        },
        series: [
          {
            type: 'pie',
            radius: ['70%', '95%'],
            width: '100%',
            height: '100%',
            label: {
              show: false
            },
            labelLine: {
              length: 0
            }
          }
        ]
      },
      leftTopPieChartValue: {
        title: '已达成目标',
        value: '58%'
      },
      leftTwoPieChart: {
        tooltip: {
          confine: true,
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#55c0ff'
            }
          },
          backgroundColor: 'rgba(24, 157, 247, 0.6)',
          textStyle: {
            color: 'white'
          }
        },
        legend: {
          show: false
        },
        color: ['#00e5a8', '#8a65e0'],
        grid: {
          left: 10,
          bottom: 10,
          top: 10,
          right: 10
        },
        title: {
          show: false
        },
        dataset: {
          source: [
            ['已达成目标', 65, 606, '#00e5a8'],
            ['未达成目标', 35, 330, '#8a65e0']
          ]
        },
        series: [
          {
            type: 'pie',
            radius: ['70%', '95%'],
            width: '100%',
            height: '100%',
            label: {
              show: false
            },
            labelLine: {
              length: 0
            }
          }
        ]
      },
      leftTwoPieChartValue: {
        title: '已达成目标',
        value: '65%'
      },
      leftThreePieChart: {
        tooltip: {
          confine: true,
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#55c0ff'
            }
          },
          backgroundColor: 'rgba(24, 157, 247, 0.6)',
          textStyle: {
            color: 'white'
          }
        },
        calculable: false,
        series: [
          {
            name: '漏斗图',
            type: 'funnel',
            left: '20%',
            top: 20,
            bottom: 20,
            width: '60%',
            // min: 0,
            // max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending', // 设置漏斗图方向
            gap: 4,
            legendHoverLink: false,
            labelLine: { //视觉引导线样式
              length: 10,
              lineStyle: {
                width: 0,
                type: 'solid'
              }
            },
            // 提示字
            label: {
              formatter: () => {
                return '';
              },
              color: ['#CD6235'],
              fontSize: '8px'
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 10,
              normal: {
                color: (params: any) => {
                  const colorList = [
                    {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: '#00e6a9' // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#00e6a9' // 100% 处的颜色
                        }
                      ],
                      global: false // 缺省为 false
                    },
                    {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: '#6EE7FA' // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#6EE7FA' // 100% 处的颜色
                        }
                      ],
                      global: false // 缺省为 false
                    },
                    {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: '#b6f971' // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#b6f971' // 100% 处的颜色
                        }
                      ],
                      global: false // 缺省为 false
                    },
                    {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: '#8a65e0' // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#8a65e0' // 100% 处的颜色
                        }
                      ],
                      global: false // 缺省为 false
                    },
                  ];
                  return colorList[params.dataIndex];
                }
              }
            },
            emphasis: {
              label: {
                fontSize: 10
              }
            },
            data: [
              { value: 203, name: '按期完成', color: '#00e6a9' },
              { value: 90, name: '预期完成', color: '#6EE7FA' },
              { value: 52, name: '提前完成', color: '#b6f971' },
              { value: 20, name: '未完成', color: '#8a65e0' }
            ]
          }
        ]
      },
      leftFourPieChart: {
        tooltip: {
          confine: true,
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#55c0ff'
            }
          },
          backgroundColor: 'rgba(24, 157, 247, 0.6)',
          textStyle: {
            color: 'white'
          }
        },
        calculable: false,
        series: [
          {
            name: '漏斗图',
            type: 'funnel',
            left: '20%',
            top: 20,
            bottom: 20,
            width: '60%',
            // min: 0,
            // max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'none', // 降序descending 升序ascending none
            gap: 4,
            legendHoverLink: false,
            labelLine: { //视觉引导线样式
              length: 10,
              lineStyle: {
                width: 0,
                type: 'solid'
              }
            },
            // 提示字
            label: {
              formatter: () => {
                return '';
              },
              color: ['#CD6235'],
              fontSize: '8px'
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 10,
              normal: {
                color: (params: any) => {
                  const colorList = [
                    {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: '#00e6a9' // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#00e6a9' // 100% 处的颜色
                        }
                      ],
                      global: false // 缺省为 false
                    },
                    {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: '#6EE7FA' // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#6EE7FA' // 100% 处的颜色
                        }
                      ],
                      global: false // 缺省为 false
                    },
                    {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: '#b6f971' // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#b6f971' // 100% 处的颜色
                        }
                      ],
                      global: false // 缺省为 false
                    },
                    {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: '#8a65e0' // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#8a65e0' // 100% 处的颜色
                        }
                      ],
                      global: false // 缺省为 false
                    },
                  ];
                  return colorList[params.dataIndex];
                }
              }
            },
            emphasis: {
              label: {
                fontSize: 10
              }
            },
            data: [
              { value: 1000, name: '按期完成', color: '#00e6a9' },
              { value: 559, name: '提前完成', color: '#6EE7FA' },
              { value: 50, name: '预期完成', color: '#b6f971' },
              { value: 20, name: '未完成', color: '#8a65e0' }
            ]
          }
        ]
      },
      leftBottomTable: {
        list: [
          { name: '设备1', num: 300, time: 9 },
          { name: '设备2', num: 280, time: 8 },
          { name: '设备3', num: 240, time: 6 },
          { name: '设备4', num: 210, time: 5 },
          { name: '设备5', num: 180, time: 3 }
        ],
        loading: true
      },
      rightTopTable: {
        list: [
          { name: '酒精', num: 3000 },
          { name: '硝石', num: 2800 },
          { name: '火药', num: 3600 },
          { name: '麻布', num: 3000 },
          { name: '纸壳', num: 3000 }
        ],
        loading: true
      },
      rightCenterTable: {
        list: [
          { name: '半成品1', num: 3000 },
          { name: '半成品2', num: 2800 },
          { name: '半成品3', num: 3600 },
          { name: '半成品4', num: 3000 },
          { name: '半成品5', num: 3000 }
        ],
        loading: true
      },
      rightTopLineChart: {
        xAxis: {
          type: 'category',
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(219,225,255,0.5)',
              width: 1,
              type: 'solid'
            }
          },
          axisTick: {
            show: true
          },
          axisLabel: {
            show: true,
            interval: 0, // 使x轴横坐标全部显示
            textStyle: {
              color: 'rgba(219,225,255,1)',
              margin: 15
            }
          }
        },
        yAxis: [
          {
            name: '单位：个',
            nameTextStyle: {
              color: '#dae9ff',
              fontSize: 10
            },
            nameGap: 10,
            type: 'value',
            axisLabel: {
              textStyle: {
                color: 'rgba(219,225,255,1)',
                margin: 15,
                fontSize: 10
              }
            },
            splitLine: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(219,225,255,0.5)',
                width: 1,
                type: 'solid'
              }
            },
            axisTick: {
              show: true, // 显示坐标轴刻度
              lineStyle: {
                color: 'rgba(219,225,255,1)',
                width: 1,
                type: 'solid'
              }
            },
            splitArea: { // y轴背景
              show: true,
              areaStyle: {
                color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.1)']
              }
            }
          },
          {
            type: 'value',
            name: '单位：万元',
            nameTextStyle: {
              color: '#dae9ff',
              fontSize: 10
            },
            nameGap: 10,
            show: true,
            lineStyle: {
              color: '#8593a0',
              width: 0,
              type: 'solid'
            },
            axisLabel: {
              textStyle: {
                color: 'rgba(225,225,225)',
                margin: 15,
                fontSize: 10
              }
            },
            // min: 0,
            // max: 100,
            splitLine: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(219,225,255,0.5)',
                width: 1,
                type: 'solid'
              }
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: 'rgba(219,225,255,1)',
                width: 1,
                type: 'solid'
              }
            }
          }
        ],
        legend: {
          top: '2%',
          right: 'center',
          textStyle: {
            color: 'white',
            fontSize: 10
          },
          itemWidth: 20, // 宽
          itemHeight: 5 // 高
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          },
          backgroundColor: 'rgba(0, 180, 235, 0.6)',
          textStyle: {
            color: 'white'
          },
          formatter: (arr: any) => {
            let str = arr[0].name + '<br/>';
            const div = "<div style='width:10px;display:inline-block;'></div>";
            arr.forEach((item: any, index: any) => {
              if (item.seriesName == '采购金额') {
                str +=
                  item.marker +
                  item.seriesName +
                  ':' +
                  div +
                  item.value[index + 1] +
                  '万元<br/>';
              } else {
                str +=
                  item.marker +
                  item.seriesName +
                  ':' +
                  div +
                  item.value[index + 1] +
                  '个<br/>';
              }
            });
            return str;
          }
        },
        grid: {
          top: '20%',
          left: '10%',
          bottom: '15%',
          right: '10%'
        },
        dataset: {
          source: [
            ['一月', 200, 100],
            ['二月', 120, 60],
            ['三月', 150, 80],
            ['四月', 200, 120]
          ]
        },
        series: [
          {
            name: '安全库存数',
            yAxisIndex: 0,
            type: 'bar',
            stack: 'Search Engine',
            emphasis: {
              focus: 'series' // 聚焦当前高亮的数据所在的系列的所有图形。
            },
            barWidth: 20,
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(20, 231, 255)' },
                { offset: 0.1, color: 'rgba(0, 208, 255, 1)' },
                { offset: 1, color: 'rgba(0, 180, 235, 0.2)' }
              ])
            }
          },
          {
            name: '采购金额',
            yAxisIndex: 1,
            type: 'line',
            // showSymbol: false, //去掉折线上的小圆
            lineStyle: {
              normal: {
                color: 'rgba(254, 184, 52)'
              }
            },
            itemStyle: {
              normal: {
                color: 'rgba(254, 184, 52)'
              }
            },
            areaStyle: { // 设置面积区域为渐变效果
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgb(254, 184, 52)' },
                { offset: 0.4, color: 'rgba(254, 184, 52, 0.4)' },
                { offset: 1, color: 'rgba(254, 184, 52, 0.2)' }
              ])
            }
          }
        ]
      },
      rightTwoChart: {
        tooltip: {
          trigger: 'item'
        },
        series: [{
          type: 'graph',
          layout: 'force',
          force: {
            repulsion: 60,
            edgeLength: 0
          },
          roam: 'scale',
          label: {
            show: true,
          },
          data: [] as any[]
        }]
      }
    });

    onMounted(() => {
      nextTick(() => {
        delay(600).then(() => {
          data.rightTopTable.loading = false;
        });
        delay(800).then(() => {
          data.rightCenterTable.loading = false;
        });
        delay(800).then(() => {
          data.leftBottomTable.loading = false;
        });
        delay(1000).then(() => {
          const arr = [
            '长沙', '岳阳', '衡阳', '益阳', '株洲', '湘潭', '邵阳', '常德', '张家界', '郴州',
            '北京', '上海', '武汉', '南京', '杭州', '太原', '青岛', '济南', '长春', '沈阳',
            '大连', '天津', '南宁', '南昌', '福州', '郑州', '合肥', '海口', '贵阳', '昆明'
          ];
          const list = [] as any[];
          arr.forEach((item, index) => {
            list.push({
              name: item,
              value: index + 1 * 20,
              draggable: true,
              label: {
                color: randomColor(),
                fontSize: index * 0.5 + 12
              }
            });
          });
          data.rightTwoChart.series[0].data = list;
        });
      });
    });

    watch(() => props.showUI, (val:any) => {
      data.hiddenUI = val;
    });

    onUnmounted(() => {

    });

    const pieChartMouseover = (e: Event, name: string) => {
      const target = e.target as HTMLElement;
      if (target?.classList.contains('pie_list')) {
        const parentNode = target.parentNode;
        const childNodes = parentNode?.childNodes as unknown as HTMLElement[];
        target?.classList.add('active');
        switch (name) {
          case '内销态势':
            data.leftTopPieChartValue.value =
              target.querySelector('.rate span')?.innerHTML + '%' || '';
            data.leftTopPieChartValue.title =
              target.querySelector('.name span')?.innerHTML || '';
            break;
          case '外销态势':
            data.leftTwoPieChartValue.value =
              target.querySelector('.rate span')?.innerHTML + '%' || '';
            data.leftTwoPieChartValue.title =
              target.querySelector('.name span')?.innerHTML || '';
            break;
        }
        childNodes?.forEach((item) => {
          if (item.nodeType === Node.ELEMENT_NODE && item != target) {
            item.classList.remove('active');
          }
        });
      }
    };

    return {
      ...toRefs(data),
      pieChartMouseover,
      webToUeMessige
    };
  },
});
</script>

<style scoped lang="less">
.home {
  width: 100%;
  height: 100%;
  user-select: none;

  .ui_left,
  .ui_right {
    pointer-events: auto;
    width: 95%;
    height: calc(100% - 10px);
    padding: 5px 10px;

    .nape_content {
      width: 100%;
      padding-bottom: 15px;

      .content_title {
        width: 100%;
        height: 35px;
        background: url('../../assets/img/contentTitle.png') no-repeat center;
        background-size: 100% 100%;

        span {
          margin-left: 40px;
          color: white;
          font-size: 20px;
          font-weight: bold;
          line-height: 25px;
          background-image: -webkit-linear-gradient(top, rgb(238, 252, 255) 50%, #6ae4ff);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }

      .center_content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: calc(100% - 40px);
        margin-top: 5px;

        .charts_box {
          width: 50%;
          height: 100%;
          margin-top: 10px;
          background: url('../../assets/img/charts_box.png') no-repeat center;
          background-size: 100% 100%;
        }

        .pseudoClass {
          position: relative;

          &::before {
            content: var(--title);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            border: 1px solid #304157;
            box-shadow: 0 0 1px 1px #304157;
            height: 98%;
            aspect-ratio: 1 / 1;
            z-index: 9;
            pointer-events: none;
            color: #bfebfc;
            font-size: 12px;
            line-height: 148px;
            text-align: center;
          }

          &::after {
            content: var(--value);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            border: 1px dashed #455365;
            box-shadow: 0 0 1px 1px #455365;
            height: 64%;
            aspect-ratio: 1 / 1;
            z-index: 9;
            pointer-events: none;
            color: #fff;
            font-size: 24px;
            font-weight: 600;
            text-align: center;
            line-height: 58px;
          }
        }

        .list_box {
          margin-left: 5px;
          width: 50%;
          height: 100%;
          overflow-y: auto;
          overflow-x: hidden;
          display: flex;
          justify-content: space-around;
          align-items: center;
          flex-wrap: wrap;

          .listTotle {
            width: 100%;
            height: 24px;

            span {
              font-size: 18px;
              color: aliceblue;
              font-weight: 600;
              text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.6);
            }
          }

          .pie_list {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #97bccf;

            &>* {
              pointer-events: none;
            }

            .name {
              display: flex;
              align-items: center;
              width: 56%;

              .circle {
                width: 6px;
                height: 6px;
                border-radius: 10px;
                margin: 0 2px;
              }

              span {
                font-size: 15px;
                text-shadow: 0px 0px 1px #7cf6ff;
              }
            }

            .rate {
              width: 27%;
              text-align: center;

              span {
                font-size: 15px;
              }
            }

            .num {
              width: 27%;
              padding-right: 5px;
              text-align: center;
              white-space: nowrap;

              span {
                color: aliceblue;
                font-size: 15px;
              }
            }

            &:hover {
              cursor: pointer;
              background: linear-gradient(to left,
                  rgba(46, 117, 189, 0.8),
                  rgba(45, 130, 214, 0.8));
              border-left: outset 3px rgb(103, 179, 255);
            }
          }

          .active {
            background: linear-gradient(to left,
                rgba(46, 117, 189, 0.8),
                rgba(45, 130, 214, 0.8));
            border-left: outset 3px rgb(103, 179, 255);
          }
        }

        .tpye_box {
          width: 100%;
          height: 90%;
          display: flex;
          justify-content: space-between;
          background: url('../../assets/img/safe_bg.png') no-repeat center;
          background-size: 100% 100%;

          .box_content {
            height: 100%;
            width: 32%;
            display: flex;
            align-items: flex-end;
            flex-wrap: wrap;
            position: relative;

            div {
              width: 100%;
              text-align: center;
              color: #dae9ff;

              &:nth-child(1) {
                height: 20%;
                position: absolute;
                top: 0;
                margin-top: 5px;
              }

              &:nth-child(2) {
                text-shadow: 2px 2px 2px rgb(0, 37, 66);
                height: 60%;
                .count_num {
                  font-size: 35px;
                }
                div{
                  margin-top: 5px;
                }
              }
            }
          }
        }

        .table_box {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-direction: column;
          font-size: 14px;
          padding: 0 5px;

          .tableHead {
            width: 100%;
            height: 36px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            span {
              width: 25%;
              font-size: 16px;
              text-align: center;
              color: #bde5fe;
            }
          }

          .tableContent {
            width: 100%;
            height: calc(100% - 36px);
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-direction: column;
            overflow-y: auto;
            overflow-x: hidden;

            .tableItem {
              width: 100%;
              height: 30px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin: 3px 0;
              transform-origin: 0 100%;

              .textContent {
                overflow: hidden;
                width: 25%;
                line-height: 30px;
                height: 30px;

                span {
                  text-align: center;
                  display: inline-block;
                  width: 100%;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  white-space: nowrap;
                  transition: all 3s linear;
                  color: #6ae4ff;
                }
              }

              &:nth-child(odd) {
                background: rgba(255, 255, 255, 0.2);
              }

              &:hover {
                background: rgba(0, 174, 240, 0.6);

                .scrollText {
                  animation: scroll-left 3s linear infinite;
                  overflow: visible;
                }
              }

              @keyframes move_tableItem {
                0% {
                  transform: translateX(260px) skewX(-60deg);
                  opacity: 0;
                }

                100% {
                  transform: translateX(0px) skewX(0deg);
                  opacity: 1;
                }
              }

              @keyframes scroll-left {
                from {
                  transform: translateX(0);
                }

                to {
                  transform: translateX(-150%);
                }
              }
            }

            .active {
              background: rgba(0, 174, 240, 0.6);
            }
          }
        }

      }
    }
  }

  .ui_left{
    .nape_content{
      height: 18%;
      &:last-child{
        height: 28%;
      }
    }
  }
  .ui_right{
    .nape_content{
      height: 20%;
    }
  }
}
</style>
